<template>
    <div>
        <el-table
            :data="tableData"
            style="width:100%;"
            border
            :stripe='stripe'
            :tooltip-effect="tooltip"
            >
            <template v-for="(item,index) in columns">
                <el-table-column show-overflow-tooltip v-if="item.haschildren" :fixed="item.fixed" :align="item.align" :key="index" :label="item.label" :prop="item.prop">
                    <template slot-scope="scope">
                        <el-table-column v-for="(citem,cindex) in scope.row.branchInfo" :key="cindex">
                            <div class="branchWrap">
                                <div class="lineHeight28">
                                    {{citem[item.prop]}}
                                </div>
                            </div>
                        </el-table-column>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip v-else :fixed="item.fixed" :align="item.align" :key="index" :label="item.label" :prop="item.prop"></el-table-column>
            </template>
        </el-table>
    </div>
</template>
<script>
    export default {
        name: "parentChildTable",
        data() {
        return {
            stripe:true,
            tooltip:"dark",
            columns:[
                {label:"客户名称",prop:"customeName",width:"100",headerAlign:"center",align:"center"},
                {label:"客户地址",prop:"customAddress",width:"100",headerAlign:"center",align:"center"},
                {label:"名称",prop:"branchName",width:"100",headerAlign:"center",align:"center"},
                {label:"日期",prop:"lastTimeQty",width:"100",headerAlign:"center",align:"center",haschildren:true},
                {label:"当地时间",prop:"branchThisTime",width:"100",headerAlign:"center",align:"center",haschildren:true},
                {label:"增减量",prop:"addReduceQty",width:"100",headerAlign:"center",align:"center",haschildren:true}
            ],
            tableData: [
                {
                    id: 1,
                    customeName: "name-1",
                    customAddress:"北京市石景山区",
                    addReducePercent:'10%',
                    branchName:"ces",
                    branchLastTime:'2019-08-09',
                    thisTime:'1-1',
                    branchAddReduceQty:'质量',
                    branchAddReducePercent:'10%',
                    children:[{
                            amount: 100,lastTimeQty:'1-1-1',addReduceQty:"100",thisTime:'1-1-1',
                            children:[
                                {thisTime:'1-1-1-1',lastTime:'2019-09-09'},
                                {thisTime:'1-1-1-2',lastTime:'2019-09-09'}]
                        },]
                },
            ]
        }
        },
        methods:{
            cellStylePadding0({ row, column, ronIndex, columnIndex }) {
                return "padding:0";
                // if (
                //     column.property == "branchName" ||
                //     column.property == "branchLastTime" ||
                //     column.property == "thisTime" ||
                //     column.property == "branchAddReduceQty" ||
                //     column.property == "branchAddReducePercent"||
                //     column.property == "amount"||
                //     column.property == "lastTimeQty"||
                //     column.property == "addReduceQty"||
                //     column.property == "thisTime"
                // ) {
                //     return "padding:0";
                // } else {
                //     return "";
                // }
                //console.log(column.property)
            },
            // handleSort(obja, objb) {
            //     let a = this.toPoint(obja.addReducePercent);
            //     let b = this.toPoint(objb.addReducePercent);
            //     console.log(a, b);
            //     if (a > b) {
            //         return 1;
            //     } else {
            //         return -1;
            //     }
            // },
            // /*百分数转小数*/
            // toPoint(percent) {
            //     var str = percent.replace("%", "");
            //     str = str / 100;
            //     return str;
            // },
        }
    }
</script>
<style scoped>
.branchWrap {
  margin: 0 -10px;
}
.branchWrap div {
  padding: 0 10px;
  border-bottom: 1px solid #dfe6ec;
}
.branchWrap div:last-child {
  border: none;
}
.lineHeight28 {
  line-height: 28px;
}
</style>
